<template>
    <div class="homeContainer">
        <div class="homeHeader">
            <mt-header title="杭州电子科技大学">
                <router-link to="/" slot="left">
                    <mt-button><img src="../images/search.png"></mt-button>
                </router-link>
                <router-link to="/Login" slot="right">
                    <mt-button>登录|注册</mt-button>
                </router-link>
            </mt-header>
        </div>
        <!-- 每天的第一次登录，获取免费优惠券 -->
        <el-dialog
            title="恭喜抽中天降红包"
            :visible.sync="visibleFirstLogin"
            width="80%"
            class="redBagContainer"
            :before-close="closeDayRedBag">
            <div class="redBox" v-for="(item,index) in redBagList" :key="index">
                <div class="imgBox"><img :src="item.shopUrl"></div>
                <div class="messageBox">
                    <p class="title" v-if="item.shopId!=0">{{item.shopName}}专享红包</p>
                    <p class="title" v-if="item.shopId==0">{{item.shopName}}</p>
                    <p class="reduction">满{{item.fullReduction/100}}减{{item.reduction/100}}</p>
                </div>
                <div class="useBox">
                    <button>去使用</button>
                </div>
                <div></div>
                <div style="padding-left:0.5rem">
                    <p v-if="item.shopId!=0">仅用于指定商家</p>
                    <p v-if="item.shopId==0">可用于任何商家</p>
                </div>
            </div>
        </el-dialog>
        <div class="swipe">
            <mt-swipe :auto="0" class="mtSwipe">
                <mt-swipe-item class="mtSwipeItem">
                        <div class="swipeContainer" v-for="(obj,index) in swipeList1" :key="index">
                            <div class="box" @click="gotoUrl(obj.routerUrl,obj.tag)">
                                <img :src="obj.logUrl">
                                <p>{{obj.label}}</p>
                            </div>
                        </div>
                </mt-swipe-item>
                <mt-swipe-item class="mtSwipeItem" v-if="swipenum">
                    <div class="swipeContainer" v-for="(obj,index) in swipeList2" :key="index">
                        <div class="box" @click="gotoUrl(obj.routerUrl,obj.tag)">
                            <img :src="obj.logUrl">
                            <p>{{obj.label}}</p>
                        </div>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="seller"><img src="../images/seller.png"><p>附近商家</p></div>
        <div class="scrollContainer">
            <ul class="scroll"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="5">
                <li v-for="(obj,index) in bodyList" :key="index">
                    <div class="shopMessage" @click="toShop(obj.shopid)">
                        <div class="imgclass"><img :src="obj.shopUrl"></div>
                        <table>
                            <tr>
                                <td class="left"><p class="pleft" v-if="obj.brand">品牌</p>{{obj.shopName}}</td>
                                <td class="right">
                                    <p class="tip1" v-if="obj.shopSevice[0]">保</p>
                                    <p class="tip1" v-if="obj.shopSevice[1]">票</p>
                                    <p class="tip1" v-if="obj.shopSevice[2]">准</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="left">
                                    <div class="score">
                                        <!-- 星星分数显示 -->
                                        <el-rate v-model="obj.score" 
                                            disabled 
                                            show-score 
                                            text-color="#ff9900" 
                                            score-template="{value}">
                                        </el-rate>
                                    </div>
                                    <p class="number">月售{{obj.number}}单</p>
                                </td>
                                <td class="right">
                                    <p class="tip2" v-if="obj.shopSevice[3]">蜂鸟专送</p>
                                    <p class="tip3" v-if="obj.shopSevice[4]">准时达</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="left"><p class="cost">￥{{obj.startCost/100}}起送/配送费约￥{{obj.distributionCost/100}}</p></td>
                                <td class="right"><p class="dist">{{obj.dist}}m</p>/<p class="time">{{obj.time}}分钟</p></td>
                            </tr>
                        </table>
                    </div>
                </li>
            </ul>
            <p v-if="loading" class="nomore">加载完毕</p>
        </div>
        <footer-bar class="footerClass"></footer-bar>
    </div>
</template>
<script>
    import footerBar from '../components/footer';
    import {mapState,mapMutations} from 'vuex'
    export default{
        data(){
            return{
                loading:false,
                swipenum:false,//是否有第二页swipeList，小于等于8，就1页，否则2页
                swipeList1:[],
                swipeList2:[],
                bodyList:[],
                currentPage:0,
                totalMax:20,
                size:5,
                redBagList:[]
            }
        },
        computed:{
            ...mapState(['firstLogin']),
            visibleFirstLogin(){
                return this.firstLogin=='1';
            }
        },
        components:{ 
            footerBar,
        },
        mounted(){
            let tokenStr=window.sessionStorage.getItem('tokenStr');
            this.postRequest('/menu/users/1',null,tokenStr).then(response=>{
                if(response.code==200){
                    let n=response.obj.length;
                    if(n>8){
                        this.swipenum=true;
                    }
                    let i=0;
                    for(;i<8&&i<n;i++){
                        let temp={
                            "logUrl":"/file"+response.obj[i].logUrl,
                            "label":response.obj[i].name,
                            "routerUrl":response.obj[i].path,
                            "tag":response.obj[i].tag//是否要判断用户是否登录才能跳转，1是要登录，0是不要登录
                        };
                        this.swipeList1.push(temp);
                    }
                    for(;i<16&&i<n;i++){
                        let temp={
                            "logUrl":"/file"+response.obj[i].logUrl,
                            "label":response.obj[i].name,
                            "routerUrl":response.obj[i].path,
                            "tag":response.obj[i].tag//是否要判断用户是否登录才能跳转，1是要登录，0是不要登录
                        };
                        this.swipeList2.push(temp);
                    }
                }
            });
            //如果是第一次登录，获取今日赠送红包
            if(this.visibleFirstLogin){
                this.getRequest('/redPaper/addDayRedParper',null,tokenStr).then(response=>{
                    if(response.code==200){
                        let list=response.obj;
                        for(let i=0;i<list.length;i++){
                            list[i].startTime=list[i].startTime.replace(/T/," ");
                            list[i].endTime=list[i].endTime.replace(/T/," ");
                            list[i].startTime=list[i].startTime.slice(0,16);
                            list[i].endTime=list[i].endTime.slice(0,16);
                            list[i].shopUrl="/file"+list[i].shopUrl;
                        }
                        this.redBagList=list;
                    }
                })
            }
        },
        methods:{
            ...mapMutations(['setFirstLogin','setShopId']),
            closeDayRedBag(){
                this.setFirstLogin(0);
            },
            toShop(obj){
                this.setShopId(obj);
                this.$router.push('shop');
            },
            loadMore(){
                //发送请求给后端，往bodyList里push新对象
                this.loading=true;//避免重复
                this.currentPage++;
                let sendCurr=this.currentPage;
                let sendSize;
                if(this.bodyList.length+this.size<=this.totalMax){
                    sendSize=this.size;
                }else{
                    sendSize=this.totalMax-this.bodyList.length;
                    this.loading=true;//关闭加载
                    return;
                }
                if(sendSize==0){
                    this.loading=true;//关闭加载
                    return;
                }
                else if(sendSize!=0){
                    let tokenStr=window.sessionStorage.getItem("tokenStr");
                    let postData={
                        currentPage:sendCurr,
                        size:sendSize
                    };
                    this.getRequest("/shop/selectAll",postData,tokenStr).then(response=>{
                        if(response.code==200){
                            let n=response.obj.data.length;
                            let last=this.bodyList.length;
                            for(let i=0;i<n;i++){
                                this.bodyList.push(response.obj.data[i]);
                                let temp=this.bodyList[last+i].shopSevice.split(";");
                                let arr=[false,false,false,false,false];
                                for(let j=0;j<temp.length;j++){
                                    arr[temp[j]-'0']=true;
                                }
                                this.bodyList[last+i].shopSevice=arr;
                                this.bodyList[last+i].score=this.bodyList[last+i].score/10;
                                this.bodyList[last+i].shopUrl='/file'+this.bodyList[last+i].shopUrl;
                            }
                        }
                    });
                }
                this.loading=false;
            },
            gotoUrl(routerUrl,tag){
                if(tag==0)
                    this.$router.push(routerUrl);
                else if(tag==1){
                    if(window.sessionStorage.getItem('tokenStr')){
                        this.$router.push(routerUrl);
                    }else{
                        this.$message({
                            message: '请先登录',
                            type: 'error'
                        });
                    }
                }
            }
        }
    }
</script>
<style  lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .homeContainer{
        position: relative;
        background-color: #f1f1f1;
        .homeHeader{
            position: relative;
            @include width-height(100%,3rem);
            mt-header{
                @include font-size-color(1rem,#fff);
            }
        }
        .swipe{
            background-color :#fff;
            @include width-height(100%,13rem);
            .mtSwipe{
                @include width-height(100%,13rem);
                .mtSwipeItem{
                    @include width-height(100%,13rem);
                    .swipeContainer{
                        @include width-height(25%,6rem);
                        display: inline-block;
                        position: relative;
                        .box{
                            @include center;
                            img{
                                @include width-height(60px,60px);
                            }
                            p{
                                @include font-size-color(1rem,#666);
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
        .seller{
            margin-top:1rem;
            background-color: #fff;
            @include width-height(100%,30px);
            position: relative;
            img{
                position:absolute;
                margin-left: 0.5rem;
                @include width-height(30px,30px);
            }
            p{
                position:absolute;
                margin: 0.5rem 0 0 2.5rem;
                @include font-size-color(1rem,#666);;
            }
        }
        .scroll{
            @include width-height(100%,59vh);//指定高度
            overflow: auto;//内容超过指定高度，出现滚动条
        }
        .scrollContainer{
            background-color: #fff;
            padding: 0 0.5rem 1rem 0;
            @include width-height(100%,80%);
            .nomore{
                text-align: center;
                @include font-size-color(0.8rem,#666);
            }
            .shopMessage{
                display: block;
                border-bottom: 2px solid #f1f1f1;
                padding-bottom: 0.5rem;
                .imgclass{
                    margin-top: 0.5rem;
                    display: inline-block;
                    @include width-height(17%,5rem);
                    img{
                        @include width-height(5rem,5rem);
                    }
                }
                table{
                    display: inline-block;
                    margin-left: 0.3rem;
                    @include width-height(80%,5rem);
                    tr{
                        display: block;
                        margin-top: 0.5rem;
                        @include width-height(100%,33%);
                        .left{
                            display: inline-block;
                            @include width-height(63%,100%);
                            .pleft{
                                display: inline;
                                background-color:rgb(255, 217, 0);
                                @include font-size-color(0.7rem,#000);
                                padding:0.1rem 0.2rem 0.1rem 0.2rem;
                                border-radius: 0.3rem;
                            }
                            .score{
                                display: inline-block;
                                @include width-height(45%,100%);
                                /deep/ .el-rate__item{
                                    margin:-4px;
                                }
                            }
                            .number{
                                display: inline-block;
                                @include width-height(40%,100%);
                                @include font-size-color(0.5rem,#666);
                            }
                            .cost{
                                @include font-size-color(0.7rem,#000);
                            }
                        }
                        .right{
                            display: inline-block;
                            @include width-height(35%,100%);
                            text-align: right;
                            p{
                                display: inline-block;
                            }
                            .tip1{
                                @include font-size-color(0.5,#666);
                                @include width-height(1.2rem,1.2rem);
                                margin:0.1rem;
                                text-align: center;
                                border:1px solid #666;
                                display:inline-block;
                            }
                            .tip2{
                                @include font-size-color(0.5rem,#fff);
                                @include width-height(3.5rem,1rem);
                                background-color: #3b95e9;
                                border:1px solid #3b95e9;
                                text-align: center;
                                display:inline-block;
                                border-radius: 0.2rem;//圆角
                            }
                            .tip3{
                                @include font-size-color(0.5rem,#3b95e9);
                                @include width-height(2.5rem,1rem);
                                background-color: #fff;
                                text-align: center;
                                margin-left:0.1rem;
                                display:inline-block;
                                border:1px solid #3b95e9;
                                border-radius: 0.2rem;//圆角
                            }
                            .dist{
                                @include font-size-color(0.9rem,#666);
                            }
                            .time{
                                @include font-size-color(0.9rem,#3b95e9);
                            }
                        }
                    }
                }
            }
        }
        /deep/ .el-dialog__header{
            padding:10px 20px 10px;
            background-color:rgb(204, 191, 252);
            border-bottom: 1px solid #fff;
        }
        /deep/ .el-dialog__title{
            color:#fff;
        }
        /deep/ .el-dialog__body{
            padding:15px 15px;
            background-color:rgb(204, 191, 252);
        }
        .redBagContainer{
            .redBox{
                @include width-height(100%,5rem);
                display: grid;
                grid-template-rows: 66.66% 33.33%;
                grid-template-columns: 20% 57% 23%;
                padding-top: 0.5rem;
                border-radius: 0.8rem;
                background-color: #fff;
                border-bottom: 2px solid #f1f1f1;
                padding-bottom: 0.2rem;
                margin-top: 0.2rem;
                .imgBox{
                    text-align: center;
                    img{
                        @include width-height(50px,50px);
                        margin-top: 0.5rem;
                        border-radius: 0.3rem;
                    }
                }
                .messageBox{
                    padding-left: 0.5rem;
                    .title{
                        padding-top: 0.5rem;
                        @include font-size-color(1.2rem,#000);
                        font-weight: bold;
                    }
                    .reduction{
                        @include font-size-color(1rem,rgba(231, 73, 25, 0.87));
                    }
                }
                .useBox{
                    position: relative;
                    button{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        @include width-height(90%,2rem);
                        @include font-size-color(1rem,#fff);
                        background-color: rgba(231, 73, 25, 0.87);
                        border: none;
                        border-radius: 1rem;
                    }
                }
                p{
                    @include font-size-color(1rem,#666);
                }
            }
        }
        .footerClass{
            @include width-height(100%,3rem);
            position: fixed;
            bottom: 0;
        }
    }
</style>